<!DOCTYPE html>
<html>

<head>
    <!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/eruda"></script>

    <script>
        eruda.init();
    </script>-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Nolos五子棋" />
    <meta name="description" content="一个简易的在线五子棋软件。来看看你能不能打败它！" />
    <title>Nolos五子棋[大师模式]</title>
    <style>
        .help {
            background-color: #4caf50;
            border: 2px solid #4caf50;
            border-radius: 7px;
            color: white;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
        }

        .help:hover {
            transition-duration: 500ms;
            background-color: #ffffff;
            color: #4caf50;
        }

        .help:active {
            transition-duration: 0ms;
            background-color: darkgreen;
            color: white;
        }

        .help:disabled {
            background-color: #4caf50;
            color: white;
            opacity: .6;
            cursor: not-allowed;
        }

        .help_used {
            background-color: #03c3d1;
            border: 2px solid #03c3d1;
            border-radius: 7px;
            color: white;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
        }

        .help_used:active {
            transition-duration: 0ms;
            background-color: #0081cc;
            color: white;
        }

        .help_used:hover {
            transition-duration: 500ms;
            background-color: #ffffff;
            color: #03c3d1;
        }

        .help_used:disabled {
            background-color: #03c3d1;
            color: white;
            opacity: .6;
            cursor: not-allowed;
        }
    </style>
    <script>
        var black = 2;
        var white = 1;
        var empty = 0;
        var human = white;
        var nolos = black;
        const INFINITY = 999999, threshold = 19000, preRecord = [[[7, 7],[7,8],[8,8]]];
        var currentRecord = [[],[],[],[],[],[],[],[]];
        var step = 1, over = false, qp = [], wins = [], bwin = [], wwin = [], iswin = {}, wincount = 0, board, context, laststep, d1, d2;
        var canVCT = (value) => value >= 271;
        var match = (sonList, fatherList) => sonList.every((item,index) => fatherList[index][0] == item[0] && fatherList[index][1] == item[1]);
        for (var i = 0; i < 15; i++) {
            qp[i] = [];
            wins[i] = [];
            for (var j = 0; j < 15; j++) {
                qp[i][j] = empty;
                wins[i][j] = [];
            }
        }
        for (var i = 0; i < 15; i++) {
            for (var j = 0; j < 11; j++) {
                for (var k = 0; k < 5; k++) {
                    wins[i][j + k][wincount] = true;
                }
                wincount++;
            }
        }
        for (var i = 0; i < 15; i++) {
            for (var j = 0; j < 11; j++) {
                for (var k = 0; k < 5; k++) {
                    wins[j + k][i][wincount] = true;
                }
                wincount++;
            }
        }
        for (var i = 0; i < 11; i++) {
            for (var j = 0; j < 11; j++) {
                for (var k = 0; k < 5; k++) {
                    wins[i + k][j + k][wincount] = true;
                }
                wincount++;
            }
        }
        for (var i = 0; i < 11; i++) {
            for (var j = 14; j > 3; j--) {
                for (var k = 0; k < 5; k++) {
                    wins[i + k][j - k][wincount] = true;
                }
                wincount++;
            }
        }
        for (var i = 0; i < wincount; i++) {
            bwin[i] = 0;
            wwin[i] = 0;
        }
        paintqp();

        var reverse = function (player) {
            return player == black ? white : black;
        }

        function paintqp() {
            document.write("<center><span id='timer'><font size=20>Nolos五子棋</font></span><br><canvas id=\"cboard\" width=540 height=540></canvas><br><button onclick='forward();' class=help id=help><font size=4>提示一步</font><br>（这会交换黑白双方！）</button></center>");
            board = document.getElementById("cboard");
            context = board.getContext("2d");
            var img = new Image();
            img.src = "./background.bmp";
            img.onload = () => {
                context.drawImage(img, 0, 0, 540, 540);
                context.fillStyle = "black";
                for (var i = 0; i < 15; i++) {
                    context.moveTo(18 + i * 36, 18);
                    context.lineTo(18 + i * 36, 522);
                    context.stroke();
                    context.moveTo(18, 18 + i * 36);
                    context.lineTo(522, 18 + i * 36);
                    context.stroke();
                }
                context.beginPath();
                context.arc(18 + 3 * 36, 18 + 3 * 36, 4, 0, 2 * Math.PI);
                context.fill();
                context.beginPath();
                context.arc(18 + 11 * 36, 18 + 11 * 36, 4, 0, 2 * Math.PI);
                context.fill();
                context.beginPath();
                context.arc(18 + 3 * 36, 18 + 11 * 36, 4, 0, 2 * Math.PI);
                context.fill();
                context.beginPath();
                context.arc(18 + 11 * 36, 18 + 3 * 36, 4, 0, 2 * Math.PI);
                context.fill();
                context.beginPath();
                context.arc(18 + 7 * 36, 18 + 7 * 36, 4, 0, 2 * Math.PI);
                context.fill();
                board.onclick = function (e) {
                    if (over) return;
                    var i = Math.floor(e.offsetX / 36);
                    var j = Math.floor(e.offsetY / 36);
                    act(i, j);
                };
                setv(7, 7, black);
            }
        }

        function getv(i, j) {
            return qp[i][j];
        }

        function setv(i, j, chess, notdraw) {
            qp[i][j] = chess;
            for (var k = 0; k < wincount; k++) {
                if (wins[i][j][k]) {
                    if (chess == black) {
                        bwin[k]++;
                        wwin[k] = 6;
                        iswin[black] = (bwin[k] == 5 | iswin[black]);
                    } else {
                        wwin[k]++;
                        bwin[k] = 6;
                        iswin[white] = (wwin[k] == 5 | iswin[white]);
                    }
                }
            }
            if (notdraw) return;
            currentRecord[0].push([i, j]);
            currentRecord[1].push([14-i, j]);
            currentRecord[2].push([i, 14-j]);
            currentRecord[3].push([14-i, 14-j]);
            currentRecord[4].push([j, i]);
            currentRecord[5].push([14-j, i]);
            currentRecord[6].push([j, 14-i]);
            currentRecord[7].push([14-j,14-i]);
            context.beginPath();
            context.arc(18 + i * 36, 18 + j * 36, 16, 0, 2 * Math.PI);
            context.fillStyle = chess == black ? "black" : "white";
            context.fill();
            context.beginPath();
            context.arc(18 + i * 36, 18 + j * 36, 7, 0, 2 * Math.PI);
            context.fillStyle = "red";
            context.fill();
            context.font = "16px bold calibri";
            context.textAlign = "center";
            context.textBaseline = "middle";
            if (laststep) {
                if (chess == black) {
                    context.beginPath();
                    context.arc(18 + laststep[0] * 36, 18 + laststep[1] * 36, 8, 0, 2 * Math.PI);
                    context.fillStyle = "white";
                    context.fill();
                    context.fillStyle = "black";
                    context.fillText(step, 18 + laststep[0] * 36, 18 + laststep[1] * 36);
                } else {
                    context.beginPath();
                    context.arc(18 + laststep[0] * 36, 18 + laststep[1] * 36, 8, 0, 2 * Math.PI);
                    context.fillStyle = "black";
                    context.fill();
                    context.fillStyle = "white";
                    context.fillText(step, 18 + laststep[0] * 36, 18 + laststep[1] * 36);
                }
            }
            laststep = [i, j];
        }

        function act(x, y) {
            if (getv(x, y) == empty) {
                d1 = (new Date()).getTime();
                setv(x, y, human);
                if (iswin[human] == true) {
                    document.getElementById("timer").innerHTML = human == white ? "白棋胜！请重新启动程序。" : "黑棋胜！请重新启动程序。";
                    over = true;
                    document.getElementById("help").disabled = over;
                    return;
                }
                step++;
                if (step >= 225) {
                    document.getElementById("timer").innerHTML = "平局！请重新启动程序。";
                    over = true;
                    document.getElementById("help").disabled = over;
                    return;
                }
                human = reverse(human);
var str="[";
for(var i=0;i<8;i++){
str+="[[" + currentRecord[i].join("],[") + "]],";
}
str=str.substring(0,str.length-1)+"]";
console.log(str);
            }
        }
    </script>
</head>

</html>